<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />

      <div class="main-content">
        <digital-flop />

        <div class="block-left-right-content">
          <ranking-board />

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <!-- <rose-chart />

              <water-level-chart /> -->
              <scroll-board />
              <scroll-board-i />
            </div>

            <cards />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from "./topHeader";
import digitalFlop from "./digitalFlop";
import rankingBoard from "./rankingBoard";
import roseChart from "./roseChart";
import waterLevelChart from "./waterLevelChart";
import scrollBoard from "./scrollBoard";
import scrollBoardI from "./scrollBoardI";
import cards from "./cards";

export default {
  name: "DataView",
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,

    roseChart,
    waterLevelChart,
    scrollBoard,
    scrollBoardI,
    cards,
  },
  data() {
    return {};
  },
  created() {
    /**
     * 编写函数list 转 tree。
     * 给出一个数组，将其转为树结构类型；
     */
    const arr = [
      { id: 1, name: "节点1", parentId: null },
      { id: 2, name: "节点2", parentId: 1 },
      { id: 3, name: "节点3", parentId: 1 },
      { id: 4, name: "节点4", parentId: null },
      { id: 5, name: "节点5", parentId: 3 },
    ];
    // 在这边编写你的程序并输出结果
    console.log("测试");
    //   function flatToTree(flatArr) {
    console.log(JSON.stringify(this.flatToTree(arr)));
  },
  mounted() {
    this.$store.dispatch("app/toggleSideBarHide", true);
    document.querySelector(".navbar").style.display = "none";
    document.querySelector(".tags-view-container").style.display = "none";

    // 添加全局键盘事件监听器
    window.addEventListener("keydown", this.handleKeydown);
  },
  beforeDestroy() {
    this.$store.dispatch("app/toggleSideBarHide", false);
    document.querySelector(".navbar").style.display = "block";
    document.querySelector(".tags-view-container").style.display = "block";

    window.removeEventListener("keydown", this.handleKeydown);
  },

  methods: {
    handleKeydown(event) {
      // 检查是否是 "Esc" 键被按下
      if (event.key === "Escape" || event.keyCode === 27) {
        // 执行你的逻辑
        console.log("Esc 键被按下了");
        // 这里可以调用其他方法或执行其他操作
        this.$router.go(-1);
      }
    },
    flatToTree(flatArr) {
      const result = [];
      const map = {};

      flatArr.forEach((node) => {
        const { id, name, parentId } = node;

        if (parentId === null) {
          // 如果节点为根节点，直接添加到 result 数组中
          result.push({ id, name, parentId, children: [] });
          map[id] = result[result.length - 1];
        } else {
          // 在 map 对象中查找该节点的父节点对象
          const parentNode = map[parentId];

          if (parentNode) {
            // 如果父节点对象存在，则将该节点添加到父节点对象的 children 属性下
            parentNode.children.push({ id, name, parentId, children: [] });
            map[id] = parentNode.children[parentNode.children.length - 1];
          } else {
            console.log("父节点对象不存在");
            // 如果父节点对象不存在，则创建一个新的父节点对象，将该节点添加到新父节点对象的 children 属性下，并在 map 对象中以该节点对象的 id 属性为键存储新父节点对象
            const newParentNode = {
              id: parentId,
              name: `节点${parentId}`,
              parentId: null,
              children: [{ id, name, parentId, children: [] }],
            };
            result.push(newParentNode);
            map[parentId] = newParentNode;
            map[id] = newParentNode.children[newParentNode.children.length - 1];
          }
        }
      });

      return result;
    },
  },
};
</script>

<style lang="scss">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 52%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
</style>
